
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
        <title>3ataba shopping</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="css/images/favicon.ico" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
        <!--[if IE 6]>
                <script type="text/javascript" src="js/png-fix.js"></script>
        <![endif]-->
        <script type="text/javascript" src="js/functions.js"></script>

        <script>

            $(document).ready(function() {

                $("#search").hide();
                $("#logged-in").hide();
                $.post("ServletViewProductsSlide", {}, function(data, status, request) {
                    if (status == "success") {

                        document.getElementById("shell").innerHTML = data;
                        $('#slider ul').jcarousel({
                            scroll: 1,
                            auto: 7,
                            itemFirstInCallback: mycarousel_firstCallback,
                            wrap: 'both'
                        });
                    }
                });

                $.post("ServletViewProductsRandom", {}, function(data, status, request) {
                    if (status == "success") {

                        document.getElementById("viewProducts").innerHTML = data;

                    }
                });
                $.get("ServletViewProductsRandom", {}, function(data, status, request) {
                    if (status == "success") {

                        document.getElementById("best-sellers").innerHTML = data;
                        $('#best-sellers ul').jcarousel({
                            auto: 5,
                            scroll: 1,
                            wrap: 'circular'
                        });
                    }
                });




                if ($.cookie("id") == null || $.cookie("id") == "" || $.cookie("id") == "undefined") {
                    $("#guest").show();
                    $("#logged-in").hide();

                } else {
                    loadCartInfo();
                    $("#guest").hide();
                    $("#logged-in").show();
                }
                $("#login").click(function() {
                    var email = $("#email").val();
                    var password = $("#password").val();
                    var data = {email: email,
                        password: password
                    };
                    $.post("ServletSignIn", data, function(data, status, request) {
                        if (status == "success") {
                            if (data === "Sorry User Not active") {
                                alert("Sorry User Not active");
                            } else if (data === "Wrong User data, please try again") {
                                alert("Wrong User data, please try again");
                            } else {

                                loadCartInfo();
                                $("#guest").hide();
                                $("#logged-in").show();
                            }
                        }
                    });
                });
            });

            function openprofile() {

                if ($.cookie("id") == null || $.cookie("id") == "" || $.cookie("id") == "undefined") {
                    alert("signin first");

                } else {
//                    var data = {id: id};
//                    $.get("ServletEditProfile", data, function(response) {
//                        window.location.href = response.redirect;
//                    });

                    jQuery.ajax({
                        type: "GET",
                        url: "ServletEditProfile",
                        data: "id=" + $.cookie("id"),
                        success: function(response) {


                            window.location.href = "profile.jsp";

                        },
                        error: function(xhr, textStatus, errorThrown) {
                            alert('Error!  Status = ' + xhr.status);
                        }
                    });
                }
            }

            function loadCartInfo() {
                var total = "0", count = "0";

                var data = {id: $.cookie("id")};
                //total
                $.post("ServletCartInfo", data, function(data, status, request) {
                    if (status == "success") {
                        total = data;
                        $.get("ServletCartInfo", data, function(data, status, request) {
                            if (status == "success") {
                                count = data;
                                //alert(  );
                                document.getElementById("logged-in").innerHTML = '<p>Welcome, <a id="user">' + $.cookie("username") + '</a> .</p>'

                                        + '<p>'
                                        + '<a class="cart" onClick="viewCart()">'
                                        + '<img src="css/images/cart-icon.png" alt="" />'
                                        + '</a>'
                                        + 'Shopping Cart (' + count + ')'
                                        + '<a id="total" class="sum">'
                                        + ' ' + total + 'L.E'
                                        + '</a>'
                                        + '</p>';

                            }
                        });

                    } else {
                        document.getElementById("logged-in").innerHTML = '<p>Welcome, <a id="user">' + $.cookie("username") + '</a> .</p>'
                                + '<p>'
                                + '<a class="cart" onClick="viewCart()">'
                                + '<img src="css/images/cart-icon.png" alt="" />'
                                + '</a>'
                                + 'Shopping Cart (' + count + ')'
                                + '<a id="total" class="sum">'
                                + '' + total + 'L.E'
                                + '</a>'
                                + '</p>';
                    }
                });
                //count
            }
            function mycarousel_firstCallback(carousel, item, idx) {
                $('#slider .nav a').bind('click', function() {
                    carousel.scroll(jQuery.jcarousel.intval($(this).text()));
                    $('#slider .nav a').removeClass('active');
                    $(this).addClass('active');
                    return false;
                });
                $('#slider .nav a').removeClass('active');
                $('#slider .nav a').eq(idx - 1).addClass('active');
            }

            function runFn() {
                $('.field, textarea').focus(function() {
                    if (this.title === this.value) {
                        this.value = '';
                    }
                }).blur(function() {
                    if (this.value === '') {
                        this.value = this.title;
                    }
                });
            }

            function signUp() {
                window.location.assign("signup.jsp");
            }

            var viewCartRequest = null;
            function viewCart() {

                if (window.XMLHttpRequest) {
                    viewCartRequest = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    viewCartRequest = new ActiveXObject("Microsfot.XMLHTTP");
                }

                viewCartRequest.onreadystatechange = viewCartHandleStateChange;
                viewCartRequest.open("GET", "ServletViewCart", true);
                viewCartRequest.send(null);
            }

            function viewCartHandleStateChange() {

                if (viewCartRequest.readyState === 4) {
                    document.getElementById("loaded").innerHTML = viewCartRequest.responseText;
                    $("#content").hide();
                    $("#loaded").show();
                }
            }

            var viewProductRequest = null;
            function viewProduct(productId) {

                if (window.XMLHttpRequest) {
                    viewProductRequest = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    viewProductRequest = new ActiveXObject("Microsfot.XMLHTTP");
                }

                viewProductRequest.onreadystatechange = viewProductHandleStateChange;
                viewProductRequest.open("GET", "ServletViewProduct?pId=" + productId, true);
                viewProductRequest.send(null);
            }

            function viewProductHandleStateChange() {

                if (viewProductRequest.readyState === 4) {
                    document.getElementById("loaded").innerHTML = viewProductRequest.responseText;
                    $("#content").hide();
                    $("#loaded").show();
                }
            }

            var viewProductsInCategoryRequest = null;
            function viewProductsInCategory(categoryId) {

                if (window.XMLHttpRequest) {
                    viewProductsInCategoryRequest = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    viewProductsInCategoryRequest = new ActiveXObject("Microsfot.XMLHTTP");
                }

                viewProductsInCategoryRequest.onreadystatechange = viewProductsInCategoryHandleStateChange;
                viewProductsInCategoryRequest.open("GET", "ServletViewProductsInCategory?cId=" + categoryId, true);
                viewProductsInCategoryRequest.send(null);
            }

            function viewProductsInCategoryHandleStateChange() {

                if (viewProductsInCategoryRequest.readyState === 4) {
                    document.getElementById("viewProducts").innerHTML = viewProductsInCategoryRequest.responseText;
                    $("#content").show();
                    $("#loaded").hide();
                    $("#search").hide();
                }
            }

            var removeProductRequest = null;
            function removeProduct(productId) {

                if (window.XMLHttpRequest) {
                    removeProductRequest = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    removeProductRequest = new ActiveXObject("Microsfot.XMLHTTP");
                }

                removeProductRequest.onreadystatechange = removeProductHandleStateChange;
                removeProductRequest.open("GET", "ServletRemoveProductFromCart?pId=" + productId, true);
                removeProductRequest.send(null);
            }

            function removeProductHandleStateChange() {

                if (removeProductRequest.readyState === 4) {
                    viewCart();
                }
            }

            var removeAllProductsRequest = null;
            function removeAllProducts() {

                if (window.XMLHttpRequest) {
                    removeAllProductsRequest = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    removeAllProductsRequest = new ActiveXObject("Microsfot.XMLHTTP");
                }

                removeAllProductsRequest.onreadystatechange = removeAllProductsHandleStateChange;
                removeAllProductsRequest.open("GET", "ServletResetCart", true);
                removeAllProductsRequest.send(null);
            }

            function removeAllProductsHandleStateChange() {

                if (removeAllProductsRequest.readyState === 4) {
                    document.getElementById("loaded").innerHTML = removeAllProductsRequest.responseText;
                    $("#content").hide();
                    $("#loaded").show();
                }
            }

            var addToCartRequest = null;
            function addToCart(productId) {

                if (window.XMLHttpRequest) {
                    addToCartRequest = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    addToCartRequest = new ActiveXObject("Microsfot.XMLHTTP");
                }

                addToCartRequest.onreadystatechange = addToCartRequestHandleStateChange;
                addToCartRequest.open("GET", "ServletAddProductToCart?pId=" + productId, true);
                addToCartRequest.send(null);
            }

            function addToCartRequestHandleStateChange() {

                if (addToCartRequest.readyState === 4) {
                    alert(addToCartRequest.responseText);
                }
            }

            function openSearch() {
                $("#search").show();
                $("#content").hide();
            }

            function searchByPriceCheck() {

                price1 = document.getElementById("searchByPrice1").value;
                price2 = document.getElementById("searchByPrice2").value;

                if (price1 == "" || price1 == "") {
                    alert("Please enter 2 prices");
                } else {
                    if (isNaN(price1) || isNaN(price2)) {
                        alert("Please enter valid numbers");
                    } else {
                        if (parseInt(price1) < parseInt(price2)) {
                            searchByPrice();
                        } else {
                            alert("1st price should be less than 2nd price");
                        }
                    }
                }
            }

            var searchByPriceRequest = null;
            function searchByPrice() {

                if (window.XMLHttpRequest) {
                    searchByPriceRequest = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    searchByPriceRequest = new ActiveXObject("Microsfot.XMLHTTP");
                }

                searchByPriceRequest.onreadystatechange = searchByPriceHandleStateChange;
                price1 = document.getElementById("searchByPrice1").value;
                price2 = document.getElementById("searchByPrice2").value;
                searchByPriceRequest.open("GET", "ServletSearchByPrice?price=1" + price1 + "&price2=" + price2, true);
                searchByPriceRequest.send(null);
            }

            function searchByPriceHandleStateChange() {

                if (searchByPriceRequest.readyState === 4) {
                    document.getElementById("viewProducts").innerHTML = searchByPriceRequest.responseText;
                    $("#content").show();
                    $("#loaded").hide();
                    $("#search").hide();
                }
            }

            var searchByCategoryRequest = null;
            function searchByCategory() {

                var inputs = document.getElementsByTagName("input"); //or document.forms[0].elements;  
                var checked = ""; //will contain all checked checkboxes  
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].type == "checkbox") {
                        if (inputs[i].checked) {
                            checked += inputs[i].value;
                            checked += "&";
                        }
                    }
                }

                if (window.XMLHttpRequest) {
                    searchByCategoryRequest = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    searchByCategoryRequest = new ActiveXObject("Microsfot.XMLHTTP");
                }

                searchByCategoryRequest.onreadystatechange = searchByCategoryHandleStateChange;
                searchByCategoryRequest.open("GET", "ServletSearchByCategory?categories=" + checked, true);
                searchByCategoryRequest.send(null);
            }

            function searchByCategoryHandleStateChange() {

                if (searchByCategoryRequest.readyState === 4) {
                    document.getElementById("viewProducts").innerHTML = searchByCategoryRequest.responseText;
                    $("#content").show();
                    $("#loaded").hide();
                    $("#search").hide();
                }
            }

            var buyProductsRequest = null;
            function buyProducts() {

                if (window.XMLHttpRequest) {
                    buyProductsRequest = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    buyProductsRequest = new ActiveXObject("Microsfot.XMLHTTP");
                }

                buyProductsRequest.onreadystatechange = buyProductsHandleStateChange;
                buyProductsRequest.open("GET", "ServletBuyProducts", true);
                buyProductsRequest.send(null);
            }

            function buyProductsHandleStateChange() {

                if (buyProductsRequest.readyState === 4) {
                    document.getElementById("loaded").innerHTML = buyProductsRequest.responseText;
                    $("#content").hide();
                    $("#loaded").show();
                    $("#search").hide();
                }
            }

        </script>
    </head>
    <body>
        <!-- Header -->

        <div id="header" class="shell">
            <div id="logo">
                <h1>
                    <a href="#">3ataba shopping</a>
                </h1>
                <a style="color:#fff; text-decoration: none;" href="administration.jsp" target="_blank">administration</a>
            </div>
            <!-- Navigation -->
            <div id="navigation">
                <ul>
                    <li><a href="#" id="ahome" class="active">Home</a></li>


                    <li><a id ="aprofile" onclick="openprofile()">Profile</a></li>
                    <li><a id ="asearch" onclick="openSearch()">Search</a></li>
                    <li><a id ="aabout" href="#">AboutUs</a></li>
                    <li><a id ="acontact" href="#">Contacts</a></li>
                </ul>
            </div>
            <!-- End Navigation -->
            <div class="cl">&nbsp;</div>
            <!-- Login-details -->
            <div id="login-details">

                <div id="guest">

                    <input type="text" id="email" class="field" value="Email" title="Email" />
                    <input type="password" id="password" class="field" value="Password" title="Password" />
                    <input type="button" id="login" value="Sign in" class="submit-btn" />
                    <br/>
                    <a id="" onclick="signUp()"> New user? Sign up.</a>

                </div>
                <div id="logged-in">

                </div>
            </div>
            <!-- End Login-details -->
        </div>
        <!-- End Header -->
        <!-- Slider -->
        <div id="slider">
            <div id="shell" class="shell">

                <!--                <div class="nav">
                                    <a href="#">1</a>
                                </div>-->
            </div>
        </div>
        <!-- End Slider -->
        <!-- Main -->
        <div id="main" class="shell">
            <!-- Sidebar -->
            <div id="sidebar">
                <ul class="categories">
                    <li>
                        <h4>Categories</h4>
                        <ul>
                            <li><h5>Women</h5>
                                <ul>
                                    <li><a onClick="viewProductsInCategory(1)">Athletic</a></li>
                                    <li><a onClick="viewProductsInCategory(2)">Blouses</a></li>
                                    <li><a onClick="viewProductsInCategory(3)">Dresses</a></li>
                                    <li><a onClick="viewProductsInCategory(4)">Jackets</a></li>
                                    <li><a onClick="viewProductsInCategory(5)">Pants</a></li>
                                    <li><a onClick="viewProductsInCategory(6)">Skirts</a></li>
                                </ul>
                            </li>

                            <li><h5>Men</h5>
                                <ul>
                                    <li><a onClick="viewProductsInCategory(7)">Athletic</a></li>
                                    <li><a onClick="viewProductsInCategory(8)">Jackets</a></li>
                                    <li><a onClick="viewProductsInCategory(9)">Pants</a></li>
                                    <li><a onClick="viewProductsInCategory(10)">Shirts</a></li>
                                    <li><a onClick="viewProductsInCategory(11)">Suits</a></li>
                                    <li><a onClick="viewProductsInCategory(12)">T-Shirts</a></li>
                                </ul>
                            </li>

                            <li><h5>Kids</h5>
                                <ul>
                                    <li><h6>Boys</h6>
                                        <ul>
                                            <li><a onClick="viewProductsInCategory(13)">Athletic</a></li>
                                            <li><a onClick="viewProductsInCategory(14)">Jackets</a></li>
                                            <li><a onClick="viewProductsInCategory(15)">Pants</a></li>
                                            <li><a onClick="viewProductsInCategory(16)">T-Shirts</a></li>
                                        </ul>
                                    </li>

                                    <li><h6>Girls</h6>
                                        <ul>
                                            <li><a onClick="viewProductsInCategory(17)">Athletic</a></li>
                                            <li><a onClick="viewProductsInCategory(18)">Jackets</a></li>
                                            <li><a onClick="viewProductsInCategory(19)">Pants</a></li>
                                            <li><a onClick="viewProductsInCategory(20)">T-Shirts</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- End Sidebar -->
            <!-- Loaded -->
            <div id="loaded">
            </div>
            <!-- End Loaded -->
            <!-- Search -->
            <div id="search">
                <center>
                    Search by price:
                    <input type="text" id="searchByPrice1" name="searchByPrice"/>
                    <input type="text" id="searchByPrice2" name="searchByPrice"/>
                    <input type="button" value="Search" onclick="searchByPriceCheck()"/>

                    </br></br></br>
                    </br></br></br>

                    Search by category:

                    <form>
                        <ul class="searchCategories">
                            <li>
                                <h4>Categories</h4>
                                <ul>
                                    <li><h5>Women</h5>
                                        <ul>
                                            <li><input type="checkbox" name="womenAthletic" value="1">Athletic</li>
                                            <li><input type="checkbox" name="" value="2">Blouses</li>
                                            <li><input type="checkbox" name="" value="3">Dresses</li>
                                            <li><input type="checkbox" name="" value="4">Jackets</li>
                                            <li><input type="checkbox" name="" value="5">Pants</li>
                                            <li><input type="checkbox" name="" value="6">Skirts</li>
                                        </ul>
                                    </li>

                                    <li><h5>Men</h5>
                                        <ul>
                                            <li><input type="checkbox" name="" value="7">Athletic</li>
                                            <li><input type="checkbox" name="" value="8">Jackets</li>
                                            <li><input type="checkbox" name="" value="9">Pants</li>
                                            <li><input type="checkbox" name="" value="10">Shirts</li>
                                            <li><input type="checkbox" name="" value="11">Suits</li>
                                            <li><input type="checkbox" name="" value="12">T-Shirts</li>
                                        </ul>
                                    </li>

                                    <li><h5>Kids</h5>
                                        <ul>
                                            <li><h6>Boys</h6>
                                                <ul>
                                                    <li><input type="checkbox" name="" value="13">Athletic</li>
                                                    <li><input type="checkbox" name="" value="14">Jackets</li>
                                                    <li><input type="checkbox" name="" value="15">Pants</li>
                                                    <li><input type="checkbox" name="" value="16">T-Shirts</li>
                                                </ul>
                                            </li>

                                            <li><h6>Girls</h6>
                                                <ul>
                                                    <li><input type="checkbox" name="" value="17">Athletic</li>
                                                    <li><input type="checkbox" name="" value="18">Jackets</li>
                                                    <li><input type="checkbox" name="" value="19">Pants</li>
                                                    <li><input type="checkbox" name="" value="20">T-Shirts</li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <input type="button" value="Search" onclick="searchByCategory(
                                        )"/>
                    </form>
                </center>
            </div>
            <!-- End Search -->
            <!-- Content -->
            <div id="content">
                <!-- Products -->
                <div id="viewProducts" class="products">


                </div>
                <!-- End Products -->
                <div class="cl">&nbsp;</div>
                <!-- Best-sellers -->
                <div id="best-sellers">

                </div>
                <!-- End Best-sellers -->
            </div>
            <!-- End Content -->
            <div class="cl">&nbsp;</div>
        </div>
        <!-- End Main -->
    </body>
</html>
